window.addEventListener('load',function() {
    var circle = document.querySelector('.circle');
    var focus = document.querySelector('.focus');
    var arrow_1 = document.querySelector('.arrow-1');
    var arrow_2 = document.querySelector('.arrow-2');
    var focuswidth = focus.offsetWidth;
    var ul = focus.querySelector('ul');
    var first = ul.children[0].cloneNode(true);
    ul.appendChild(first);
    var total = ul.children.length;
    for(var i =0; i<total-1; i++) {
        li = document.createElement('li');
        li.setAttribute('index',i);
        circle.appendChild(li);
    }
    circle.children[0].style.backgroundColor = 'white';
    focus.addEventListener('mouseenter',function() {
        arrow_1.style.display = 'block';
        arrow_2.style.display = 'block';
        clearInterval(timer);
        timer = null;
    })
    focus.addEventListener('mouseleave',function() {
        arrow_1.style.display = 'none';
        arrow_2.style.display = 'none';
        timer = setInterval(function() {
            //手动调用点击事件
            arrow_2.click();
        }, 2000);
    })
    var dot = circle.querySelectorAll('li');
    var temp = 0;
    var num = 0;
    arrow_2.addEventListener('click',function() {
        if(num == total-1) {
            ul.style.left = 0;
            num = 0;
        }
        num++;
        temp++;
        temp = temp == circle.children.length ? 0 : temp;
        for(var i =0; i<dot.length; i++) {
            dot[i].style.backgroundColor = '';
        }
        dot[temp].style.backgroundColor = 'white';
        animate(ul,-focuswidth*num);
    })
    for(var i =0; i<dot.length; i++) {
        dot[i].addEventListener('click',function() {
            num = this.getAttribute('index');
            if(num == total) {
                ul.style.left = 0;
                num = 0;
            }
            for(var i =0; i<dot.length; i++) {
                dot[i].style.backgroundColor = '';
            }
            this.style.backgroundColor = 'white';
            animate(ul,-focuswidth*num);
        })
    }
    arrow_1.addEventListener('click',function() {
        num--;
        if(num < 0) {
            ul.style.left = -(total-1)*focuswidth + 'px';
            num = total-1;
        }
        for(var i =0; i<dot.length; i++) {
            dot[i].style.backgroundColor = '';
        }
        dot[num].style.backgroundColor = 'white';
        animate(ul,-focuswidth*num);
    })
    var timer = setInterval(function() {
        //手动调用点击事件
        arrow_2.click();
    }, 2000);
})